<template>
  <div class="content">
    <div class="login-bg">
      <span>登录</span>
      <div class="login_content mt20">
        <p>电话号码</p>
        <div class="login_list">
          <input type="text" v-model="userTel">
          <i class="iconfont icon del_icon" @click="userTel = ''"></i>
        </div>
      </div>
      <div class="login_content">
        <p>密码</p>
        <div class="login_list">
          <input type="text" v-model="userPw">
          <i class="iconfont icon del_icon" @click="userPw = ''"></i>
        </div>
      </div>
      <b @click="forgot">忘记密码?</b>
      <div class="btn_xyb" @click="submit"></div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        userTel: '',
        userPw: ''
      }
    },
    mounted() {
    },
    methods: {

      /**
       * 登录逻辑
       */
      submit(){
        if (!this.userTel) {
          this.$message({
            message: '电话号码不能为空~',
            type: 'warning'
          });
          return
        }

        this.$store.dispatch('userLogin', {userTel: this.userTel, userPw: this.userPw}).then((data) => {
          this.$router.push({path: '/userHome'})
        })
      },

      /**
       * 忘记密码
       */
      forgot(){
        this.$router.push({path: '/userForgot'})
      },
    }
  }
</script>

<style scoped>
  @import "../../assets/css/iconfont.css";
  @import "../../assets/css/login_selfcenter.css";
  @import "../../assets/css/reset.css";
</style>
